<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img
          src="https://imgcps.jd.com/ling-cubic/ling4/lab/amZzL3QxLzE2NTU5Mi8xNS8xODU3OC8yNjQ1MTYvNjA3N2QxMmVFMGRlYzc1MzgvZGVhZGNkZDgzNTFhM2MxMS5wbmc/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/1635188247780728834/cr/s/q.jpg"
          alt
        />
      </div>
      <div class="swiper-slide">
        <img
          src="https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000366/10041545686207/FocusFullshop/CkRqZnMvdDEvMjIzMDY0LzE3LzIzNTI0LzE1NzE4Ni82NDRhYzljNkY1MDJhN2Y1My8yNjNhMmM1MDMxMTg0YTMzLnBuZxIJMy10eV8wXzU0MAI47ot6QhAKDOaxvumFkueZvemFkhABQhAKDOenkuadgOS7tzcyOBACQhAKDOeri-WNs-aKoui0rRAGQgoKBuenjeiNiRAHWL_5jdafpAI/cr/s/q.jpg"
          alt
        />
      </div>
      <div class="swiper-slide">
        <img
          src="https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000367/7156063/FocusFullshop/CkRqZnMvdDEvMTQ0NjgyLzM2LzM1NDM0LzEwMDcwOS82NDMwNzFkYkY0MTlhZDU1ZS9lZjVjZTdkNzMwZDk4MmI2LnBuZxIJMi10eV8wXzUzMAI474t6QhkKFeawtOaYn-Wutue6uuS4ieS7tuWllxABQg4KCua7oTU55YePMzAQAkIQCgznq4vljbPmiqLotK0QBkIKCgbnp43ojYkQB1jf4rQD/cr/s/q.jpg"
          alt
        />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from "swiper"; // 注意引入的是Swiper
import "swiper/css/swiper.min.css"; // 注意这里的引入
export default {
  data() {
    return {
        // 把数据抽出来
        bannerList:[
            {id:1,src:""}
        ]
    };
  },
  mounted() {
    new Swiper(".swiper-container", {
      loop: true, // 循环模式选项
      autoplay: true, // 自动播放

      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination"
      }
    });
  }
};
</script>

<style scoped>
.swiper-container {
  width: 100vw;
  height: 2.5rem;
}
.swiper-slide img {
  width: 100vw;
  height: 2.5rem;
}
</style>